<template>
    <el-table
      :data="categoryData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="loadChildren"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="type" label="类型" />
    </el-table>
  </template>
  
  <script lang="ts" setup>
  interface Item {
    id: number
    name: string
    type?: string
    hasChildren?: boolean
    children?: Item[]
  }
  
  const categoryData: Item[] = [
    {
      id: 1,
      name: '中式厨电',
      hasChildren: true,
    },
    {
      id: 2,
      name: '西式厨电',
      hasChildren: true,
    },
  ]
  
  const loadChildren = (row: Item, _treeNode: unknown, resolve: (data: Item[]) => void) => {
    const dataMap: Record<number, Item[]> = {
      1: [
        { id: 101, name: '养生壶', type: '中式厨电' },
        { id: 102, name: '电压力锅', type: '中式厨电' },
        { id: 103, name: '电磁炉', type: '中式厨电' },
        { id: 104, name: '电饼铛', type: '中式厨电' },
        { id: 105, name: '多功能锅', type: '中式厨电' },
        { id: 106, name: '豆浆机', type: '中式厨电' },
        { id: 107, name: '电煮锅', type: '中式厨电' },
        { id: 108, name: '电饭煲', type: '中式厨电' },
        { id: 109, name: '炒菜机器人', type: '中式厨电' },
        { id: 110, name: '电热水壶', type: '中式厨电' },
      ],
      2: [
        // { id: 201, name: '榨汁机', type: '西式厨电' },
        // { id: 202, name: '消毒机', type: '西式厨电' },
        // { id: 203, name: '绞肉机', type: '西式厨电' },
        // { id: 204, name: '微波炉', type: '西式厨电' },
        // { id: 205, name: '电烤箱', type: '西式厨电' },
        // { id: 206, name: '果蔬净化', type: '西式厨电' },
      ],
    }
  
    setTimeout(() => {
      resolve(dataMap[row.id] || [])
    }, 500)
  }
  </script>
  